<template>
	<view class="content">
		<nav-bar back>邀请分享</nav-bar>
		<canvas
			class="canvas"
		  canvas-id="qrcode-canvas" 
		  style="width: 200px; height: 200px;"
		></canvas>
		<view class="hint1">扫描邀请二维码，加入九牛人</view>
		<view class="download-app" @tap="handleDownload">
			<image class="img" src="/static/image/android.png" mode="aspectFit"></image>
			九牛人app下载
		</view>
	</view>
</template>

<script>
import UQRCode from 'uqrcodejs'
console.log(UQRCode,'------UQRCode')
export default {
	data() {
		return {
			
		}
	},
	computed: {
		userInfo() {
			return this.userStore.userInfo;
		},
	},
	onReady() {
	    this.generateQRWithLogo();
	},
	onLoad(options){
		
	},
	methods: {
		async generateQRWithLogo() {
		  // 1. 生成基础二维码
		  const qr = new UQRCode();
		  qr.data = `https://vip.ycbb.store/#/pages/register/register?referenceCode=${this.userInfo.referenceCode}`;
		  qr.size = 200;
		  qr.margin = 10;
		  qr.colorDark = "#000000";
		  qr.colorLight = "#FFFFFF";
		  
		  try {
		    qr.make();
		    const ctx = uni.createCanvasContext('qrcode-canvas', this);
		    qr.canvasContext = ctx;
		    qr.drawCanvas();
		    // // 3. 绘制中心图标（关键代码）
		    // const logoSize = 40; // 图标尺寸（建议不超过二维码的20%）
		    // const logoX = (qr.size - logoSize) / 2;
		    // const logoY = (qr.size - logoSize) / 2;
		    
		    // // 方式1：使用本地图片
		    // ctx.drawImage('/static/image/android.jpg', logoX, logoY, logoSize, logoSize);
		    // 4. 最终绘制
		    ctx.draw(true, () => {
		      uni.hideLoading();
		      console.log("带图标的二维码生成完成");
		    });
		    
		  } catch (e) {
		    console.error("生成失败:", e);
		  }
		},
		handleDownload() {
		      // #ifdef H5
		      window.location.href = 'https://vip.ycbb.store/jnr.apk'; // Android
		      // 或跳转到应用商店
		      // window.open('itms-apps://itunes.apple.com/app/idAPPID'); // iOS
		      // #endif
		
		      // #ifdef APP-PLUS
		      plus.runtime.openURL('https://vip.ycbb.store/jnr.apk'); 
		      // #endif
		
		      // #ifdef MP-WEIXIN
		      uni.showModal({
		        title: '提示',
		        content: '请在浏览器中打开此链接下载',
		        confirmText: '复制链接',
		        success: (res) => {
		          if (res.confirm) {
		            uni.setClipboardData({
		              data: 'https://vip.ycbb.store/jnr.apk'
		            });
		          }
		        }
		      });
		      // #endif
		}
	}
}
</script>

<style lang="scss" scoped>
	.canvas{
		display: block;
		margin: 10rpx auto 50rpx;
	}
	.content{
		padding-top: 200rpx;
		text-align: center;
	}
	.grade-name{
		margin-bottom: 60rpx;
		color: #333;
		font-size: 32rpx;
		font-weight: bold;
	}
	.code-img{
		display: inline-block;
		margin-bottom: 32rpx;
		.img{
			width: 520rpx;
			height: 520rpx;
			margin: auto;
		}
	}
	.hint1,.hint2{
		color: #878787;
		font-size: 24rpx;
	}
	.hint1{
		margin-bottom: 160rpx;
	}
	.again{
		cursor: pointer;
		color: #7891F8;
	}
	.download-app{
		display: flex;
		justify-content: center;
		align-items: center;
		text-decoration: underline;
		.img{
			width: 40rpx;
			height: 40rpx;
			margin-right: 5rpx;
		}
	}
</style>
